<template>
	<div class="white-box">

		<div class="task-one">
			<div class="task-one__item">
				<span class="task-one__label">会员uid：</span>
				<el-input placeholder="请输入会员uid搜索" v-model="so_user_id" @keyup.enter.native="handleSearch" clearable>
				</el-input>
			</div>
			<div class="task-one__item">
				<span class="task-one__label">会员名称：</span>
				<el-input placeholder="请输入会员名称搜索" v-model="search_text" @keyup.enter.native="handleSearch" clearable>
				</el-input>
			</div>
			<div class="task-one__item">
				<span class="task-one__label">手机号：</span>
				<el-input placeholder="请输入手机号搜索" v-model="phone" @keyup.enter.native="handleSearch" clearable>
				</el-input>
			</div>
			<div class="task-one__btn clearfix">
				<el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
			</div>
		</div>

		<el-table class="table-mb" v-loading="loading" :data="arr_data" :header-cell-style="{ background: '#F5F7FA' }"
			element-loading-background="rgba(255, 255, 255, 0.6)" @selection-change="handleAllSelected">
			<!-- <el-table-column type="selection" width="55" /> -->
			<el-table-column prop="store_name" label="会员" width="100">
				<template #default="{ row }">
					<el-image class="user_logo" lazy :src="proxy.imgUrl + row.user_logo" fit="cover"
						v-if="row.user_logo" />
					<el-avatar v-else :size="60"
						src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
				</template>
			</el-table-column>
			<el-table-column prop="id" label="UID"></el-table-column>
			<el-table-column prop="user_name" label="会员昵称"></el-table-column>
			<el-table-column prop="phone" label="会员电话"></el-table-column>
			<el-table-column prop="store_img" label="上级信息">
				<template #default="{ row }">
					<div>
						<div v-if="row.invite_user.length!=0">上级ID:{{row.invite_user.id}}</div>
						<div v-if="row.invite_user.length!=0">上级昵称:{{row.invite_user.user_name}}</div>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="操作" width="270" fixed="right">
				<template #default="{ row }">
					<el-button class="theme-btn" link type="primary" @click="handleBind(row)">设为上级</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
			:total="totalNums" layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>

		<go-back />

	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		reactive,
		onMounted,
		watch
	} from "vue"
	import OneLoad from "@mixins/one-load"
	import {
		useRouter,useRoute
	} from "vue-router"
	import {
		Search,
		UploadFilled,
		CloseBold,
		Plus
	} from "@element-plus/icons-vue"
	import GoBack from "@components/GoBack.vue"

	import {
		EluiChinaAreaDht
	} from 'elui-china-area-dht'
	import chinaAreaData from 'china-area-data';

	import UploadImg from "@mixins/upload-img"

	const router = useRouter()
	const route = useRoute()
	const {
		proxy
	} = getCurrentInstance()

	const uid = route.query.uid
	onMounted(() => {
		getList()

	})
	/**
	 * minxin列表加载
	 */
	const {
		page,
		pageSizeNum,
		pageSize,
		loading,
		arr_data,
		totalNums,
		search_text,
		search_btn,
		pubParams,
		pubRefreshParams,
		getdata
	} = OneLoad()
	const type_id = ref("")

	// 切换每页显示条数
	watch(pageSize, (val) => {
		page.value = 1
		pubParams(getList)
	})
	// 跳转第几页
	watch(page, (val) => {
		pubParams(getList)
	})
	const handleSearch = () => {
		search_btn.value = true
		pubRefreshParams(getList)
	}
	const phone = ref('')
	const is_verifier = ref('')
	const is_distributor = ref('')
	const so_user_id=ref('')
	function getList() {
		let params = {
			page: page.value,
			limit: pageSize.value,
			phone: phone.value,
			user_name: search_text.value,
			user_id: uid,
			so_user_id:so_user_id.value
		}
		getdata("admin/member/super", params)
	}

	const handleBind = (row) => {
		proxy.$axios
			.post("admin/member/setsuper", {
				user_id:uid,
				pid_user_id:row.id
			})
			.then((res) => {
				if (res.data.code == 0) {
					proxy.$message({
						message: "设置成功",
						type: "success"
					})
					router.push('/MemberList')
				} else {
					proxy.$message({
						message: res.data.msg,
						type: "error"
					})
				}
			})
			.catch((err) => {
				
			})
	}
	


</script>

<style lang="less" scoped>
	.user_logo {
		width: 60px;
		height: 60px;
		border-radius: 60px;
	}
</style>

<style>
	.avatar-uploaderqishou .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploaderqishou .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.avatar-uploaderqishou .el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>